<template>
  <div>
    <div class="main_content">
      <div class="name">
        <el-row>
          <span>当前轮播图</span>
          <el-button type="primary" size="medium" @click="handleEdit()" style="float:right">编辑</el-button>
        </el-row>
        <el-row>
          <el-carousel
            height="600px"
            arrow="always"
            :autoplay="false"
            indicator-position="none"
            @change="pictureChange"
          >
            <el-carousel-item v-for="(item,index) in theList" :key="index">
              <img ref="image" :src="item.pictureUrl" style="width:100%;height:100%;"/>
            </el-carousel-item>
          </el-carousel>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
import myhttp, {
  isEmpty,
  msgError,
  msgSuccess,
  msgWarning
} from "../../utils/myhttp";
import qs from "qs";
import api from "../../utils/api";
export default {
  data() {
    return {
      //轮播图片
      theList: [
      ],
      bannerHeight:'',
    };
  },
  components: {},
  methods: {
    imgLoad() {
      this.$nextTick(function() {
        this.bannerHeight = this.$refs.image.height;					
      })
    },
    pictureChange() {},
    handleEdit() {
      this.$router.push({ name: "swiperEdit" });
    },
    getAllList: async function() {
      var responseData = await $.post(api.getPictureByUserId, {
        userId: localStorage.getItem("userId")
      });
      this.theList = responseData.items;
      if (responseData.result == "error") {
        msgError(this, responseData.msg);
      }
    }
  },
  mounted() {
    this.imgLoad();
    window.addEventListener('resize', () => {
      this.bannerHeight = this.$refs.image.height;
      console.log('resize:' + this.bannerHeight)
    })
  },
  created() {
    this.getAllList();
  },
  mounted() {}
};
</script>
<style scoped>
.name {
  border: 1px solid #d4d4d4;
  /* text-align:center; */
}
.name .el-row:first-child {
  padding: 10px 30px;
  border-bottom: 1px solid #d4d4d4;
}
.name .el-row:first-child > span {
  line-height: 36px;
}
.name .el-row:last-child {
  padding: 10px;
  height:700px;
}
</style>


